<template>
  <el-drawer :title="'编辑网卡配置'" :visible.sync="drawerVisible" :size="'600px'"
             custom-class="data-element-drawer">
    <div class="drawer-body">
      <el-form ref="dataForm" :rules="bnetCardModelRules" :model="bnetCardModel" label-width="190px">
        <el-form-item label="网卡" prop="name">
          <el-input v-model="bnetCardModel.name" placeholder="网卡"/>
        </el-form-item>
        <el-form-item label="取址类型" prop="type">
          <el-select v-model="bnetCardModel.type" placeholder="请选择" @change="typeChange">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="bnetCardModel.ip" :disabled="bnetCardModel.type === 'dhcp'" placeholder="IP地址"/>
        </el-form-item>
        <el-form-item label="子网掩码" prop="netmask">
          <el-input v-model="bnetCardModel.netmask" :disabled="bnetCardModel.type === 'dhcp'" placeholder="子网掩码"/>
        </el-form-item>
        <el-form-item label="网关地址" prop="gateway">
          <el-input v-model="bnetCardModel.gateway" :disabled="bnetCardModel.type === 'dhcp'" placeholder="网关地址"/>
        </el-form-item>
        <el-form-item label="静态路由" prop="route">
          <el-input v-model="bnetCardModel.route" placeholder="静态路由"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">提交</el-button>
    </div>
  </el-drawer>
</template>
<script>
  import { updateBnetCard, getBnetCardById } from "@/api/bnetCard";

  export default {
    props: {},
    data() {
      const netmask = (rule, value, callback) => {
        if (this.bnetCardModel.type === 'static') {
          if (value === '' || value === null || value === undefined) {
            callback(new Error("子网掩码不能为空!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      const ip = (rule, value, callback) => {
        if (this.bnetCardModel.type === 'static') {
          if (value === '' || value === null || value === undefined) {
            callback(new Error("子网掩码不能为空!"));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
      return {
        bnetCardModel: {},
        typeOptions: [
          {
            label: 'dhcp',
            value: 'dhcp'
          },
          {
            label: 'static',
            value: 'static'
          }
        ],
        drawerVisible: false,
        isSubmitLoading: false,
        bnetCardModelRules: {
          type: [{ required: true, trigger: "change", message: "请选择取址类型" }],
          ip: [{ validator: ip, trigger: "blur" }],
          netmask: [{ validator: netmask, trigger: "blur" }]
        }
      };
    },
    computed: {},
    watch: {},
    mounted() {
    },
    methods: {
      show(id) {
        this.resetModal();
        this.isSubmitLoading = false;
        this.drawerVisible = true;
        this.getBnetCardById(id);
      },
      getBnetCardById(id) {
        this.tableLoading = true;
        getBnetCardById(id).then(result => {
          this.bnetCardModel = result;
          this.tableLoading = false;
        });
      },
      typeChange() {
        this.clearValidate();
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs["dataForm"].clearValidate();
        });
      },
      resetModal() {
        this.bnetCardModel = {
          id: undefined,
          name: undefined,
          type: undefined,
          ip: undefined,
          netmask: "255.255.255.0",
          gateway: undefined,
          route: undefined
        };
        this.clearValidate();
      },
      save() {
        this.isSubmitLoading = true;
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            //
            updateBnetCard(this.bnetCardModel)
              .then(() => {
                this.success();
              })
              .catch(() => {
                this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
              });
          } else {
            this.isSubmitLoading = false;
            this.$message({
              message: this.$t("formIsNotValidMessage"),
              type: "warning"
            });
          }
        });
      },
      success() {
        this.$message({
          message: "编辑成功",
          type: "success"
        });
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        this.close();
        this.$emit("save");
      },
      close() {
        this.drawerVisible = false;
        this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
      }
    }
  };
</script>

<style lang="scss">
  .data-element-drawer {
    .el-drawer__body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .drawer-body {
      flex: 1;
      overflow: auto;
      padding-bottom: 56px;

      .el-input {
        max-width: 360px;
      }

      .el-select {
        width: 360px;
      }
    }

    .drawer-footer {
      padding: 10px;
      background-color: #eef1f6;
      text-align: right;

      button {
        min-width: 100px;
      }
    }
  }

  .static-text {
    display: inline-block;
  }

  .tips-text {
    display: inline-block;
    font-size: small;
    margin-left: 5px;
    color: #999999;
  }
</style>
